<template>
    <div>
        登录页面
        <!-- <img src="http://localhost:8080/images/8.png" alt=""> -->
        <!-- <van-cell title="展示弹出层" is-link @click="showPopup" /> -->
        <van-tabs v-model:active="active">
            <van-tab v-for="index in tabsdata" :title="'标签 ' + index.id" :name="index.name">
                内容 {{ index.id }}
            </van-tab>
        </van-tabs>
        <van-icon name="wap-nav" size="40px" @click="showPopup" />
        <van-popup v-model:show="showBottom" closeable position="bottom" :style="{ height: '80%' }">
            <van-grid>
                <van-grid-item v-for="value in tabsdata">
                    <van-button type="default" @click="onClick(value.name)">{{ value.title}}</van-button>
                </van-grid-item>

            </van-grid>

        </van-popup>
        <!-- <img src="http://localhost:8080/images/8uc.png" alt="" width="100%"> -->

        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" />
            </van-swipe-item>
        </van-swipe>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="90" />
            <el-table-column prop="name" label="用户名" width="120" />
            <el-table-column prop="password" label="密码" width="120" />
            <el-table-column prop="img" label="头像" width="120" >
                <template #default="scope" >
                    <img :src="scope.row.img" alt="" width="30" height="30">
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column prop="status" label="状态" width="120" />
            <el-table-column fixed="right" label="操作" min-width="150">
                <template #default>
                    <el-button type="danger" size="small" @click="handleClick">
                        删除
                    </el-button>
                    <el-button type="primary" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <button @click="onbtn" type="success" style="margin-bottom: 60px;">获取用户信息</button>


    </div>
</template>

<script setup>

import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const showBottom = ref(false);
const showPopup = () => {
    showBottom.value = true;
};
const id =ref()
onMounted(() => { 
    console.log(route.query.id);
    id.value = route.query.id;
    console.log("id=",id.value);
    
})
const active = ref('a');
const tabsdata = ref([
    { id: 1, title: '标签 1' ,name:'a'},
    { id: 2, title: '标签 2', name: 'b' },
    { id: 3, title: '标签 3', name: 'c' },
    { id: 4, title: '标签 4', name: 'd' },
    { id: 5, title: '标签 5', name: 'e' },
   

])
const images = ref([])


onMounted(() => { 
    axios.get('http://localhost:8080/list').then(res => { 
        console.log(res);
        images.value = res.data
        
    })
    onbtn()
})
const onClick = (name) => {
    console.log(name);
    // active.value = id - 1;
    active.value = name;

    showBottom.value = false;
}

const tableData =ref()

const onbtn = async () => { 
    console.log("获取用户信息");
    let res =await axios.get('http://localhost:8080/api/user')
   console.log(res.data);
    tableData.value=res.data
}

const handleClick = () => { 
    console.log("点击删除按钮");
    
}

</script>

<style scoped>
.van-icon{
    background-color: white;
    float: right;
    margin-top: -64px;
}
</style>